<template>
	<view class="authority-content" :class="{hidden: show || show2 || show3 || show4 || show5}">
		<!-- 角色列表 -->
		<view class="authority-list" style="padding: 30rpx;min-height: calc(100vh - 70px);padding-bottom: 0;">
			<view class=""  style="height: 100%" v-if="RolesList.length==0">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="请先添加成员" textSize="36"
					iconSize="60">
				</u-empty>
			</view>
			<view class="card" v-for="(item) in RolesList" :key="item.id" v-else>
				<view class="u-flex-between mb20">
					<view class="" @click="findByRoleId(item)">
						{{item.roleName}}
					</view>
					<view class="">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-flex-between">
					<view class="text-gray num">
						员工人数:{{item.empNumber}}
					</view>
					<view class="" @click="remove(item.id)">
						<u-icon name="trash" color="#ff0000"></u-icon>
					</view>
				</view>
			</view>
		
		</view>
		<view class="footer" style="
			bottom: 0;width: 100%;padding: 30rpx;background-color: #fff3e885;padding-top: 0;">
			<view class="">
				<u-button type="primary" :customStyle="orangeBtn" @click="addEmp">
					新增角色
				</u-button>
			</view>
		</view>
		
		<u-popup :show="show2" @close="show2=false" :round="20" :safeAreaInsetBottom="false">
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show2=false" style="">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						新增角色
					</view>
				</view>
				<view class="popup-c">
					<view class="edit-form">
						<view class="u-flex form-item">
							<view class="">
								角色名称
							</view>
							<input type="text" placeholder="请输入角色名称"></input>
						</view>
						<view class="u-flex form-item" @click="show3=true">
							<view class="">
								角色员工
							</view>
							<view class="u-flex" style="flex: 1;">
								<view class="mr-10">
									{{zjEmpRole.roName}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button :customStyle="cancelBtn" @click="show2=false">取 消</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn2" @click="saveAddEmp">
								保 存
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择角色员工 -->
		<u-popup :show="show3" @close="show3=false" :round="20" mode="bottom" :overlay="true">
			<view style="max-height: 600px;" class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show3=false">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						选择角色
					</view>
				</view>
				<view class="bm-list" style="padding: 0 30rpx;height: 100%;overflow: auto;">
					<view class="" v-for="(item,index) in empList" style="padding: 30rpx;">
						<view class="" @click="selectJs(item,index)" :class="{isActive:currindex===index}">
							{{item.label}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 编辑员工 -->
		
			<u-popup :show="show4" @close="show4=false" :round="20" mode="bottom" :safeAreaInsetBottom="false">
				<view class="popup-v">
					<view class="popup-header">
						<view class="close u-flex" @click="show4=false" style="">
							<u-icon name="close"></u-icon>
						</view>
						<view class="title">
							编辑角色
						</view>
					</view>
					<view class="popup-c">
						<view class="edit-form">
							<view class="u-flex form-item">
								<view class="">
									角色名称
								</view>
								<input type="text" placeholder="请输入角色名称" v-model="name"></input>
							</view>
							<view class="u-flex form-item" @click="showJs">
								<view class="">
									角色员工
								</view>
								<view class="u-flex">
									<view class="mr-10">
										{{zjEmpRole.roName}}
									</view>
									<view class="u-flex">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>
							<view class="u-flex-between"
								style="background-color: #fff;padding: 15px;border-radius: 20rpx;margin-bottom: 30rpx;border: 1px solid #f5f5f5;">
								<view class="fsize14" @click="changeMb" :class="[changeType == 1?'isActive':'']">
									移动端权限
									<view :class="{'active-line':changeType == 1}">
									</view>
								</view>
								<view class="fsize14" @click="changePc" :class="[changeType == 2?'isActive':'']">
									网页端权限
									<view :class="{'active-line':changeType == 2}">
									</view>
								</view>
							</view>
						</view>
						<scroll-view :scroll-y="true" style="height: 52vh;">
							<view class="" v-if="changeType == 1">
								<template>
									<view class="OuterTemplate auth_box" style="height: 52vh;overflow: auto;">
										<Permissionset ref="ref_perm" :auth_list="auth_list" :auth_ids="auth_ids"
											childkey="notLower" authkey="id" @saveauth="saveclick"></Permissionset>
									</view>
								</template>
							</view>
							<view class="" v-else-if="changeType == 2" style="height: 100vh;">
								<template>
									<view class="auth_box" tyle="height: 100vh;overflow: auto;">
										<Permissionset ref="ref_perm2" :auth_list="auth_list" :auth_ids="auth_ids"
											childkey="notLower" authkey="id" @saveauth="saveclick2"></Permissionset>
									</view>
								</template>
							</view>
						</scroll-view>
						<view class="footer u-flex">
							<view class="">
								<u-button :customStyle="cancelBtn" @click="show4=false"
									style="background-color: #fff;">取 消</u-button>
							</view>
							<view>
								<u-button type="primary" :customStyle="orangeBtn2" @click="saveEditEmp">
									保 存
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		
		<u-popup :show="show5" @close="show5=false" :round="20" mode="bottom" :overlay="true">
			<view style="max-height: 600px;" class="popup-v flex-tb">
				<view class="popup-header">
					<view class="close u-flex" @click="show5=false">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						选择角色
					</view>
				</view>
				<view class="bm-list" style="height: 100%;overflow: auto;">
					<view class="" v-for="(item,index) in empList" style="padding: 30rpx;">
						<view class="item" @click="selectJsItem(item,index)"
							:class="{isActive:currEmp.indexOf(item.value) >= 0}">
							{{item.label}}
							<u-icon class="icon" name="checkbox-mark" color="#fff"></u-icon>
						</view>
					</view>
					<view class="btns">
						<view class="">
							<u-button :customStyle="cancelBtn" @click="show5=false" style="background-color: #fff;">取
								消</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn2" @click="selectJs2">
								确 定
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Permissionset from "./components/Permissionset.vue"
	export default {
		components: {
			Permissionset,
		},
		data() {
			return {
				show: false,
				custAccId: '',
				acId: '',
				RolesList: [],
				removieId: '',
				empList: [],
				zjEmp: [],
				name: '',
				zjEmpRole: {
					custAccId: '',
					roName: ''
				},
				orangeBtn: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: 'linear-gradient(90deg, rgba(253, 116, 0, 1) 0%, rgba(255, 87, 51, 1) 100%)',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: '18px'
				},
				show2: false,
				show3: false,
				show5: false,
				cancelBtn: {
					height: '50px !important',
					border: '0',
					borderRadius: '8px',
					fontSize: '18px',
					width: '120px',
					color: '#999',
					backGround: '#fff'
				},
				orangeBtn2: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: '#fd7400',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: '18px',
					width: '200px'
				},
				currindex: -1,
				show4: false,
				id: '',
				addAcIds: [],
				delAcIds: [],
				changeType: 1,
				lookUp: false,
				editUp: false,
				ctitle: '添加角色',
				// 
				role_name: '',
				role_desc: '',
				c_id: '',
				// 初始权限菜单
				auth_list: [],
				// 已勾选的权限
				auth_ids: '',
				roleList: [],
				currEmp: []
			};
		},
		onLoad() {
			this.custAccId = uni.getStorageSync('custAccid')
			this.acId = uni.getStorageSync('acId')
			this.get_Roles()
			this.get_EmpList()
			console.error()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.get_Roles()
				this.get_EmpList()
				
				
			},
			click(item) {
				console.log('item', item);
			},
			async remove(id) {
				this.show = true;
				this.removieId = id
				let that = this
				uni.showModal({
					content: '是否删除该角色',
					confirmColor: "#fd7400",
					confirmText: '确认',
					success: res => {
						if (!res.confirm) return
						this.delRoleConfirm()
					}
				})
			},
			async delRoleConfirm() {
				const res = await uni.$api.authority.removeRole(this.custAccId, this.acId, {
					roleId: this.removieId
				})
				uni.showToast({
					title: res.msg || '',
					icon: 'none'
				})
				console.log(res)
				this.get_Roles()
			},
			changeMb() {
				this.changeType = 1
				console.log(this.changeType, 'this.changeType')
				this.test2()
			},
			changePc() {
				this.changeType = 2
				this.test()
			},
			
			// 获取角色列表
			async get_Roles() {
				const res = await uni.$api.authority.getRoles({
					custAccId: '51'
				})
				console.log(res, '角色列表')
				this.RolesList = res.data
			},
			// 编辑角色
			goEdit(id) {
				uni.navigateTo({
					url: `./editrole?id=${id}`
				})
			},
			// 新增角色
			addEmp() {
				this.get_EmpList()
				this.show2 = true
			},
			// 选择角色
			showJs() {
				//this.currEmp = [];
				this.show5 = true;
			},
			selectJs(item, index) {
				console.log(item, index)
				this.zjEmp = [item]
				this.zjEmp.map((v, i) => {
					this.zjEmp[i] = {
						acId: v.acId,
					}
				})
				this.zjEmpRole.custAccId = item.custAccId
				this.zjEmpRole.roName = item.empName
				this.currindex = index
				console.log(this.zjEmp)
				this.show3 = false
			},
			selectJsItem(item, index) {
				console.log(item, index)
				let fIndex = this.currEmp.indexOf(item.value);
				if (fIndex >= 0) {
					this.currEmp.splice(fIndex, 1);
				} else {
					this.currEmp.push(item.value);
				}
			},
			selectJs2() {
				this.zjEmp = this.currEmp.map(i => {
					return {
						acId: i
					}
				})
				/*this.zjEmp.map((v, i) => {
					this.zjEmp[i] = {
						acId: v.acId,
					}
				})*/
				let empName = this.zjEmp.map(i => {
					let info = this.empList.find(s => s.value == i.acId);
					return info.label || '';
				})
				this.zjEmpRole.roName = empName.join(',');
				this.show5 = false
				this.addAcIds = this.currEmp
				console.log(this.zjEmp, this.zjEmpRole.roName, this.addAcIds)
				//this.currindex=index
			},
			// 获取员工数据
			async get_EmpList() {
				const res = await uni.$api.authority.getEmpList({
					custAccId: this.custAccId
				})
				console.log(res, '员工数据')
				this.empList = res.data.map(i => {
					return {
						label: i.empName,
						value: i.id,
						...i
					}
				})
				uni.stopPullDownRefresh()
			},
			// 新增角色
			async saveAddEmp() {
				let data = {
					zjEmpRole: this.zjEmpRole,
					zjEmp: this.zjEmp
				}
				const res = await uni.$api.authority.addEmp(this.acId, data)
				console.log(res)
				if (res.code === 0) {
					uni.showToast({
						title: '新增成功',
						icon: 'none'
					})
					this.get_Roles()
					this.show2 = false
				}
			},
			// 角色详情
			async findByRoleId(item) {
				console.log(item, 'item')
				const res = await uni.$api.authority.findByRoleId({
					roleId: item.id
				})
				this.id = item.id
				console.log(this.id, res.data.empList)
				this.name = res.data.role.roName
				let currEmp = item.emproles.split('、');
				this.currEmp = currEmp.map(i => {
					let info = this.empList.find(s => s.label == i);
					return info.value;
				});
				this.zjEmpRole.roName = currEmp.join(',');
				console.log('this.currEmp', this.currEmp)
				// this.zjEmpRole.roName = res.data.empList[0].empName
				this.show4 = true
				this.test2()
			},
			// 保存编辑
			async saveEditEmp() {
				let that = this
				if (this.changeType == 1) {
					let ref_perm = this.$refs.ref_perm;
					console.log('移动', ref_perm.get_auth())
					let e = ref_perm.get_auth()
					this.saveclick(e)

				} else if (this.changeType == 2) {
					let ref_perm2 = this.$refs.ref_perm2;
					console.log('网页', ref_perm2.get_auth())
					let e = ref_perm2.get_auth()
					this.saveclick2(e)
				}
				let role = {
					id: '',
					roName: '',
				}
				let data = {
					role: role,
					addAcIds: this.addAcIds,
					delAcIds: this.delAcIds
				}
				console.log(data)
				role.roName = this.name
				role.id = this.id
				const res = await uni.$api.authority.editEmp(this.custAccId, this.acId, data)
				if (res.code === 0) {
					uni.showLoading({
						title: '更新中'
					});
					setTimeout(function() {
						uni.hideLoading();
						that.get_Roles()
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
						that.show4 = false
					}, 2000);
				}
			},
			async test() {
				const res = await uni.$api.authority.getMenuRole2({})
				this.auth_list = res.data
				const role = await uni.$api.authority.getRole({
					roleId: this.id
				});
				this.roleList = role.data;
				let keys = [];
				for (let key in this.roleList) {
					this.roleList[key].forEach(i => {
						keys.push(i.id)
					})
				}
				this.auth_ids = keys.join(',');
				console.log('roleList', this.auth_ids, this.roleList, this.auth_list)
			},
			async saveclick(e) {
				const res = await uni.$api.authority.roleUpdateMobile(this.custAccId, this.acId, {
					menubarId: e,
					roleId: this.id
				});
				console.log('saveclick', e, res)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			async saveclick2(e) {
				const res = await uni.$api.authority.roleUpdate(this.custAccId, this.acId, {
					menubarId: e,
					roleId: this.id
				});
				console.log('saveclick', e, res)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			async test2() {
				const res = await uni.$api.authority.getMenuRole({})
				this.auth_list = res.data
				const role = await uni.$api.authority.getRole({
					roleId: this.id
				});
				this.roleList = role.data;
				let keys = [];
				for (let key in this.roleList) {
					this.roleList[key].forEach(i => {
						keys.push(i.id)
					})
				}
				this.auth_ids = keys.join(',');
				console.log('roleList', this.auth_ids, this.roleList, this.auth_list)
			},
		}
	}
</script>

<style lang="scss">
	.auth_box {
		padding: 30rpx;
		background: #fff;
	}

	.isActive {
		color: #fd7400;
		font-weight: 700;
	}

	/deep/.u-transition {
		z-index: 10065 !important;
	}

	/deep/uni-toast {
		z-index: 99999 !important;
		/* 根据实际情况进行调整 */
	}

	.active-line {
		content: '';
		height: 3px;
		font-weight: 700;
		font-weight: 700;
		background-color: #fd7400;
		position: relative;
		bottom: -23rpx;
		transition: width 0.6s;
	}

	.popup-v {
		// background: #fff;
		// height: calc(100vh - env(safe-area-inset-bottom));
		max-height: calc(85vh - env(safe-area-inset-bottom));
		// height:95vh;
		overflow: auto;
		.popup-header {
			padding: 30rpx 30rpx;
			display: flex;
			justify-content: center;

			.close {
				width:
					40rpx;
			}

			.title {
				font-size: 36rpx;
				font-weight: 700;
				width: 100%;
				text-align: center;
			}
		}

		.edit-form {
			padding: 0 30rpx;
			min-height: 40vh;
			.form-item {
				background-color: #fff;
				justify-content: space-between;
				padding: 30rpx;
				margin-bottom: 30rpx;
				text-align: right;
				border: 1px solid #f5f5f5;
				border-radius: 20rpx;
			}
		}

		.popup-c {
			max-height: 100%;
			overflow: auto;

			.popup-content {
				padding: 0 60rpx 60rpx 60rpx;

				.title {
					margin-bottom: 30rpx;
					border-left: 6rpx solid #fd7400;
					padding: 0 10rpx;

				}

				.tagA {
					text-align: center;
					padding: 20rpx 0;
					margin-bottom: 30rpx;
					border-radius: 8rpx;
					background-color: #f5f5f5;
				}
			}

			.footer {
				padding: 60rpx;
				width: 100%;
				justify-content: space-between;
				// position: fixed;
				// bottom: 0;
				background-color: #fff;
				padding-top: 0;
			}
		}
	}

	.authority-content {
		background: #fff3e885;
		// height: 100vh;
		// height: 100%;
		    height: 100%;

		&.hidden {
			overflow: hidden;
		}

		.card {
			background-color: #fff;
			padding: 10px 21px;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.num {
				font-size: 24rpx;
			}
		}
	}

	.bm-list {
		position: relative;
		padding: 0 30rpx 70px 30rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				display: none;
				background: #fd7400;
				border-radius: 50%;
			}

			&.isActive {
				.icon {
					display: block;
				}
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 10px;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.flex-tb {
		display: flex;
		flex-direction: column;

		.bm-list {
			flex: 1;
		}
	}
</style>